/*
 * @Author: zusheng imzusheng@163.com
 * @Date: 2025-04-11 12:40:52
 * @LastEditors: zusheng imzusheng@163.com
 * @LastEditTime: 2025-04-13 20:34:26
 * @FilePath: \zushengCC\src\pages\Lab\index.tsx
 */
import { ProCard } from '@ant-design/pro-components'
import { useLocation } from '@umijs/max'
import { Radio } from 'antd'
import { useEffect, useState } from 'react'
import styles from './index.less'
import CardPanorama from './Panorama/PanoramaJs'
import CardThree from './Panorama/ThreeJs'
import CardWaterMark from './WaterMark'

const Lab = () => {
  const [type, setType] = useState('threeJs')
  const location = useLocation()

  // 处理URL中的type参数
  useEffect(() => {
    // 回到网页顶部
    window.scrollTo({ top: 0 })
    const labType = Number(new URLSearchParams(location.search).get('type') || 0)

    // 根据URL中的type参数设置显示内容
    if (labType === 0) {
      // WaterMark
      setType('watermark')
    } else if (labType === 1) {
      // Panorama - 默认使用threeJs
      setType('threeJs')
    } else {
      // 无效参数，默认显示WaterMark
      setType('watermark')
    }
  }, [location])

  // 根据type参数筛选显示内容
  const renderContent = () => {
    const labType = Number(new URLSearchParams(location.search).get('type') || 0)

    // 根据type参数显示内容
    if (labType === 0) {
      // 只显示WaterMark
      return (
        <ProCard
          title="WaterMark"
          subTitle="给你的照片添加专业水印"
          className={styles.proCard}
          headStyle={{
            padding: 0
          }}
          bodyStyle={{
            padding: '10px 0 0',
            height: 'calc(100% - 72px)', // 减去头部高度
            display: 'flex'
          }}
        >
          <CardWaterMark />
        </ProCard>
      )
    } else if (labType === 1) {
      // 只显示全景影像
      return (
        <ProCard
          title="全景影像"
          extra={
            <Radio.Group size={'small'} value={type} onChange={(e) => setType(e.target.value)}>
              <Radio.Button value="threeJs">threeJs</Radio.Button>
              <Radio.Button value="panoramaJs">panoramaJs</Radio.Button>
            </Radio.Group>
          }
          tooltip=""
          className={styles.proCard}
          headStyle={{
            padding: 0
          }}
          bodyStyle={{
            padding: '10px 0 0',
            height: 'calc(100vh - 72px)', // 减去头部高度
            display: 'flex'
          }}
        >
          {type === 'panoramaJs' && <CardPanorama />}
          {type === 'threeJs' && <CardThree />}
        </ProCard>
      )
    } else {
      // 无效参数，默认显示WaterMark
      return (
        <ProCard
          title="WaterMark"
          subTitle="给你的照片添加专业水印"
          className={styles.proCard}
          headStyle={{
            padding: 0
          }}
          bodyStyle={{
            padding: '10px 0 0',
            height: 'calc(100% - 72px)', // 减去头部高度
            display: 'flex'
          }}
        >
          <CardWaterMark />
        </ProCard>
      )
    }
  }

  return <div className={styles.pageLab}>{renderContent()}</div>
}

export default Lab
